<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>ESP8266 时钟 控制器</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
            text-align: center;
        }
        .control-group {
            background: white;
            padding: 20px;
            margin: 15px 0;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        input[type="color"] {
            width: 80px;
            height: 80px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
        }
        input[type="range"] {
            width: 80%;
            margin: 15px 0;
        }
        select {
            padding: 10px;
            margin: 10px 0;
            width: 80%;
            border-radius: 5px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        button:disabled {
            background-color: #cccccc;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
        }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
<h1>ESP8266 LED 控制器</h1>

<div class="control-group">
    <h3>🎨 颜色选择</h3>
    <input id="colorPicker" type="color" value="#ffffff">
</div>

<div class="control-group">
    <h3>💡 亮度调节</h3>
    <input id="brightnessSlider" max="255" min="0" type="range" value="50">
    <span id="brightnessValue">50</span>%
</div>

<div class="control-group">
    <h3>✨ 灯光效果</h3>
    <label for="effectSelector"></label>
    <select id="effectSelector">
        <option value="clock">时钟</option>
        <option value="rainbow">彩虹</option>
        <option value="pulse">呼吸</option>
        <option value="strobe">闪烁</option>
    </select>
</div>

<button id="applyButton" onclick="applySettings()">应用设置</button>
<button onclick="getCurrentStatus()">刷新状态</button>

<div class="status" id="statusMessage"></div>

<script>
    // 获取当前LED状态
    async function getCurrentStatus() {
        try {
            const response = await fetch('/get');
            const data = await response.json();

            // 更新界面显示
            document.getElementById('brightnessSlider').value = data.brightness;
            document.getElementById('brightnessValue').textContent = data.brightness;

            // 将RGB转换为十六进制颜色码
            document.getElementById('colorPicker').value = rgbToHex(data.r, data.g, data.b);

            showStatus('状态已刷新', 'success');
        } catch (error) {
            showStatus('获取状态失败: ' + error, 'error');
        }
    }

    // RGB转十六进制
    function rgbToHex(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

    // 十六进制转RGB
    function hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : { r: 0, g: 0, b: 0 };
    }

    // 应用设置到ESP8266
    async function applySettings() {
        const applyButton = document.getElementById('applyButton');
        applyButton.disabled = true;
        applyButton.textContent = '应用中...';

        try {
            const color = document.getElementById('colorPicker').value;
            const brightness = document.getElementById('brightnessSlider').value;
            const effect = document.getElementById('effectSelector').value;

            const rgb = hexToRgb(color);

            const params = new URLSearchParams({
                r: rgb.r,
                g: rgb.g,
                b: rgb.b,
                brightness: brightness,
                effect: effect
            });

            const response = await fetch('/set?' + params.toString(), {
                method: 'POST'
            });

            const result = await response.json();

            if (result.success) {
                showStatus('设置应用成功！', 'success');
                // 2秒后自动获取最新状态确认
                setTimeout(getCurrentStatus, 2000);
            } else {
                showStatus('应用失败: ' + result.message, 'error');
            }
        } catch (error) {
            showStatus('网络错误: ' + error, 'error');
        } finally {
            applyButton.disabled = false;
            applyButton.textContent = '应用设置';
        }
    }

    // 显示状态消息
    function showStatus(message, type) {
        const statusDiv = document.getElementById('statusMessage');
        statusDiv.textContent = message;
        statusDiv.className = 'status ' + type;
        statusDiv.style.display = 'block';

        // 5秒后自动隐藏
        setTimeout(() => {
            statusDiv.style.display = 'none';
        }, 5000);
    }

    // 实时更新亮度百分比显示
    document.getElementById('brightnessSlider').addEventListener('input', function() {
        document.getElementById('brightnessValue').textContent = this.value;
    });

    // 页面加载时获取当前状态
    document.addEventListener('DOMContentLoaded', getCurrentStatus);
</script>
</body>
</html>